<!DOCTYPE html>
<html>


<div th:replace="common/jsCssRef :: jsfJsCssRef"></div>

<body class="bgf6">

<div th:replace="common/head :: jsfHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">
            <div th:replace="common/left :: jsfLeft"></div>

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">
                        <li><a href="###">首页</a></li>
                        <li><a href="###">统筹规划</a></li>
                        <li><a href="/view/specialPlan">专项发展规划</a></li>
                        <li><a href="###">查看</a></li>
                    </ul>
                </div>

                <div class="bgff mt10 pb20">
                    <div class="wrap">
                        <div class="top-info">
                            <h2 class="title">{{plan.planName}}<span class="no" v-text="plan.planNo"></span></h2>
                            <div class="mt5">
                                <span>创建人：{{log.creatorName}}</span>
                                <span class="ml20">创建时间：{{log.createTime}}</span>
                            </div>
                            <div class="edit tr">
                                <p class="org">{{planStatusDesc(plan.currentState)}}</p>
                            </div>
                            <el-steps style="margin-top:10px;" :active="3">
                                <el-step title="填写基本信息"></el-step>
                                <el-step title="提交"></el-step>
                                <el-step title="待审核"></el-step>
                                <el-step title="审核结果"></el-step>
                            </el-steps>
                        </div>

                        <div class="box mt30">
                            <div class="box-title"><span>编制专项规划基本信息</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title">规划名称</span>
                                    <span class="content" v-text="plan.planName"></span>
                                    <span class="title">规划编号</span>
                                    <span class="content" v-text="plan.planNo"></span>
                                </div>
                                <div class="two">
                                    <span class="title">开始年份</span>
                                    <span class="content" v-text="plan.planBeginTime"></span>
                                    <span class="title">截止年份</span>
                                    <span class="content" v-text="plan.planEndTime"></span>
                                </div>
                                <div class="two">
                                    <span class="title">编制单位</span>
                                    <span class="content" v-text="plan.compileUnit"></span>
                                    <span class="title">编制人</span>
                                    <span class="content" v-text="plan.compilePerson"></span>
                                </div>
                                <div class="two">
                                    <span class="title">编制时间</span>
                                    <span class="content" v-text="plan.compileTime"></span>
                                    <span class="title">所属全市规划</span>
                                    <span class="content" v-text="plan.belongPlanDesc"></span>
                                </div>
                                <div class="one">
                                    <span class="title">上传附件</span>
                                    <div class="content">
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title">备注</span>
                                    <div class="content" v-text="plan.remark"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box mt30">
                            <div class="box-title"><span>审核专项编制规划</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title">审核人</span>
                                    <span class="content" v-text="plan.auditPerson"></span>
                                    <span class="title">审核时间</span>
                                    <span class="content" v-text="plan.auditTime"></span>
                                </div>
                                <div class="one">
                                    <span class="title">审核结果</span>
                                    <div class="content"><span class="cgre"><i
                                            class="ion-checkmark-circled"></i> 通过</span></div>
                                </div>
                                <div class="one">
                                    <span class="title">上传附件</span>
                                    <div class="content">
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title">审核意见</span>
                                    <div class="content" v-text="plan.remark"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box mt30 pb100">
                            <div class="box-title"><span>历史审核记录</span></div>
                            <div class="mt20 f14">
                                <ul class="history">
                                    <li class="item">
                                        <div class="left">2019/08/13</div>
                                        <div class="mid">
                                            <i class="ion-checkmark-circled"></i>
                                        </div>
                                        <div class="right lh_18">
                                            <p class="f14 c666 fb mt5">专项发展规划审核</p>
                                            <p class="f12 c999 mt3"><span>审核人：<i
                                                    class="c333">{{plan.auditPerson}}</i></span><span class="ml10">审核结果：<i
                                                    class="c333">通过</i></span></p>
                                            <p class="f12 pb5 c999">审核意见：<span class="c333">{{plan.auditOpinion}}</span>
                                            </p>
                                            <a href="" class="f12"><i class="md md-attach-file"></i> 远程直播电视项目验收报告.doc <i
                                                    class="ti-import ml10"></i></a>
                                        </div>
                                    </li>

                                    <li class="item">
                                        <div class="left">2019/08/13</div>
                                        <div class="mid">
                                            <i class="ion-checkmark-circled"></i>
                                        </div>
                                        <div class="right lh_18">
                                            <p class="f14 c666 fb mt5">专项发展规划审核</p>
                                            <p class="f12 c999 mt3"><span>申请人：<i
                                                    class="c333">{{plan.updaterJfid}}</i></span></p>
                                            <a href="" class="f12"><i class="md md-attach-file"></i> 远程直播电视项目验收报告.doc <i
                                                    class="ti-import ml10"></i></a>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                        </div>

                        <div class="box mt30 pb100" v-if="plan.updaterJfid != 0 && plan.currentState <= 2">
                            <div class="box-title"><span>最新一次修改记录</span></div>
                            <div class="mt20 f14">
                                <div class="modify-log dflx sbt aic">
                                    <div class="dflx">
                                        <img src="/images/1.jpg" alt="" class="avator"/>
                                        <div class="mt5 pl10">
                                            <p class="f14 c333">{{updaterJfid}}</p>
                                            <p class="f12 c666 mt3">编辑了审定结果</p>
                                        </div>
                                    </div>
                                    <span class="c666 f12" v-text="plan.updateTime"></span>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $('#special').addClass('active');

    var statusPlanObj = {
        '1': '草稿',
        '2': '待审核',
        '3': '审核通过',
        '4': '审核未通过'
    }

    var planId = $.getUrlParam("id");

    var appPage = new Vue({
        el: '#app',
        data: {
            plan: {},
            log:{},
            updaterJfid:""
        },
        mounted: function () {
            this.loadPlanDetail();
        },
        computed: {},
        methods: {
            getLog(){
                let _this = this;
                $.ajax({
                    'url': contentPath + '/specialPlan/getList/log',
                    'dataType': 'json',
                    'type': 'get',
                    'data': {
                        planId: planId
                    },
                    'success': function (result) {
                        _this.updaterJfid = result.data[0].actionPerson;
                    }
                })
            },
            planStatusDesc: function (val) {
                return statusPlanObj[val];
            },
            loadPlanDetail() {
                let _this = this;
                $.ajax({
                    'url': contentPath + '/specialPlan/getOne',
                    'dataType': 'json',
                    'type': 'get',
                    'data': {
                        id: planId
                    },
                    'success': function (result) {
                        if (result.code != 1000) {
                            alert(result.message);
                            return;
                        }
                        console.log(result);
                        _this.plan = result.data;
                    },
                    'error': function (result) {
                    }
                });
                $.ajax({
                    'url': contentPath + '/specialPlan/getOne/log',
                    'dataType': 'json',
                    'type': 'get',
                    'data': {
                        planId: planId,
                        actionType: 1
                    },
                    'success': function (result) {
                        if (result.code != 1000) {
                            alert(result.message);
                            return;
                        }
                        _this.log = result.data;
                    },
                    'error': function (result) {
                    }
                });
            }
        }
    })

    function toEdit() {
        window.location.href = contentPath + '/view/toSpecialPlanEdit?id=' + planId;
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
</script>
</body>
</html>
